{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Basic example for highmaps module in python-highcharts\n",
    "========================================================\n",
    "\n",
    "As in highcharts, datasets need to input using \"add_data_set\" method.\n",
    "Options can be either set by the \"set_options\" method as shown here or\n",
    "by constructing a option dictionary object and input using \"set_dict_options\" method (recommended)\n",
    "\n",
    "In highmaps, the map data can be input in multiple ways:\n",
    "\n",
    "1. add_map_data method: (recommended)\n",
    "    add_map_data(geojson, **kwargs)\n",
    "    set map directly to the input (geojson) data \n",
    "    geojson is the map data in geojson format\n",
    "\n",
    "2. set_map_source method:\n",
    "    set_map_source(map_src, jsonp_map = False)\n",
    "    map_src is the url (https) where map data is located,\n",
    "    it is recommended to get map data from highcharts' map collection: \n",
    "    https://code.highcharts.com/mapdata/\n",
    "    jsonp_map is boolean parameter if mapdata is loaded from jsonp\n",
    "    geojson (from jsonp) or .js are accepted formats. \n",
    "    default is javascript (.js) format (from highcharts)\n",
    "\n",
    "The following example is from Highmaps Demos\n",
    "GeoJSON areas: http://www.highcharts.com/maps/demo/geojson"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<iframe style=\"border:0;outline:none;overflow:hidden\" srcdoc=\"&lt;!DOCTYPE html&gt;\n",
       "&lt;html lang=&quot;en&quot;&gt;\n",
       "    &lt;head&gt;\n",
       "        &lt;meta charset=&quot;utf-8&quot; /&gt;\n",
       "        &lt;link href=&quot;https://www.highcharts.com/highslide/highslide.css&quot; rel=&quot;stylesheet&quot; /&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/maps/highmaps.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/highcharts.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/maps/modules/map.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/maps/modules/data.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/maps/modules/exporting.js&quot;&gt;&lt;/script&gt;\n",
       "    &lt;/head&gt;\n",
       "    &lt;body style=&quot;margin:0;padding:0&quot;&gt;\n",
       "        \t    &lt;div id=&quot;container&quot; style=&quot;width:650px;height:500px;&quot;&gt;Loading....&lt;/div&gt;\n",
       "\n",
       "\n",
       "    &lt;script&gt;\n",
       "        $(function(){\n",
       "\n",
       "\n",
       "            $.getJSON(&quot;http://www.highcharts.com/samples/data/jsonp.php?filename=germany.geo.json&amp;callback=?&quot;, function (geojson)\n",
       "                {\n",
       " \n",
       "\n",
       "\n",
       "\n",
       "\n",
       "        \tHighcharts.setOptions({&quot;lang&quot;: {}, &quot;global&quot;: {}});\n",
       "            var option = {&quot;loading&quot;: {}, &quot;subtitle&quot;: {}, &quot;title&quot;: {&quot;text&quot;: &quot;GeoJSON in Highmaps&quot;}, &quot;series&quot;: {}, &quot;mapNavigation&quot;: {&quot;buttonOptions&quot;: {&quot;verticalAlign&quot;: &quot;bottom&quot;}, &quot;enabled&quot;: true}, &quot;labels&quot;: {}, &quot;yAxis&quot;: {}, &quot;chart&quot;: {&quot;width&quot;: 650, &quot;renderTo&quot;: &quot;container&quot;, &quot;height&quot;: 500}, &quot;tooltip&quot;: {}, &quot;plotOptions&quot;: {}, &quot;credits&quot;: {&quot;enabled&quot;: false}, &quot;colors&quot;: {}, &quot;xAxis&quot;: {}, &quot;exporting&quot;: {}, &quot;drilldown&quot;: {}, &quot;navigation&quot;: {}, &quot;legend&quot;: {}, &quot;colorAxis&quot;: {}};\n",
       "\n",
       "\n",
       "            var data = [{&quot;name&quot;: &quot;Random data&quot;, &quot;type&quot;: &quot;map&quot;, &quot;dataLabels&quot;: {&quot;enabled&quot;: true, &quot;format&quot;: &quot;{point.properties.postal}&quot;}, &quot;states&quot;: {&quot;hover&quot;: {&quot;color&quot;: &quot;#BADA55&quot;}}, &quot;joinBy&quot;: [&quot;code_hasc&quot;, &quot;code&quot;], &quot;data&quot;: [{&quot;code&quot;: &quot;DE.SH&quot;, &quot;value&quot;: 728}, {&quot;code&quot;: &quot;DE.BE&quot;, &quot;value&quot;: 710}, {&quot;code&quot;: &quot;DE.MV&quot;, &quot;value&quot;: 963}, {&quot;code&quot;: &quot;DE.HB&quot;, &quot;value&quot;: 541}, {&quot;code&quot;: &quot;DE.HH&quot;, &quot;value&quot;: 622}, {&quot;code&quot;: &quot;DE.RP&quot;, &quot;value&quot;: 866}, {&quot;code&quot;: &quot;DE.SL&quot;, &quot;value&quot;: 398}, {&quot;code&quot;: &quot;DE.BY&quot;, &quot;value&quot;: 785}, {&quot;code&quot;: &quot;DE.SN&quot;, &quot;value&quot;: 223}, {&quot;code&quot;: &quot;DE.ST&quot;, &quot;value&quot;: 605}, {&quot;code&quot;: &quot;DE.&quot;, &quot;value&quot;: 361}, {&quot;code&quot;: &quot;DE.NW&quot;, &quot;value&quot;: 237}, {&quot;code&quot;: &quot;DE.BW&quot;, &quot;value&quot;: 157}, {&quot;code&quot;: &quot;DE.HE&quot;, &quot;value&quot;: 134}, {&quot;code&quot;: &quot;DE.NI&quot;, &quot;value&quot;: 136}, {&quot;code&quot;: &quot;DE.TH&quot;, &quot;value&quot;: 704}], &quot;mapData&quot;: geojson}]\n",
       "    \t    option.series = data;\n",
       "\n",
       " \n",
       "\n",
       "            var chart = new Highcharts.Map(option);\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "            });\n",
       " \n",
       " \n",
       "\n",
       "\n",
       "        \n",
       "\t});\n",
       "        &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt;\" height=500 width=650></iframe>"
      ],
      "text/plain": [
       "<highcharts.highmaps.highmaps.Highmap at 0x7f60200ebc10>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from highcharts import Highmap\n",
    "H = Highmap(width = 650, height = 500)\n",
    "\n",
    "options = { # construct option dict\n",
    "                                   \n",
    "    'chart' :{ 'renderTo' : 'container'\n",
    "    },\n",
    "                           \n",
    "    'title' : {\n",
    "        'text' : 'GeoJSON in Highmaps'\n",
    "    },\n",
    "\n",
    "    'mapNavigation': {\n",
    "        'enabled': True,\n",
    "        'buttonOptions': {\n",
    "            'verticalAlign': 'bottom'\n",
    "        }\n",
    "    },\n",
    "\n",
    "    'colorAxis': {\n",
    "    },\n",
    "} \n",
    "\n",
    "data = [ # input dataset \n",
    "    {\n",
    "        \"code\": \"DE.SH\",\n",
    "        \"value\": 728\n",
    "    },\n",
    "    {\n",
    "        \"code\": \"DE.BE\",\n",
    "        \"value\": 710\n",
    "    },\n",
    "    {\n",
    "        \"code\": \"DE.MV\",\n",
    "        \"value\": 963\n",
    "    },\n",
    "    {\n",
    "        \"code\": \"DE.HB\",\n",
    "        \"value\": 541\n",
    "    },\n",
    "    {\n",
    "        \"code\": \"DE.HH\",\n",
    "        \"value\": 622\n",
    "    },\n",
    "    {\n",
    "        \"code\": \"DE.RP\",\n",
    "        \"value\": 866\n",
    "    },\n",
    "    {\n",
    "        \"code\": \"DE.SL\",\n",
    "        \"value\": 398\n",
    "    },\n",
    "    {\n",
    "        \"code\": \"DE.BY\",\n",
    "        \"value\": 785\n",
    "    },\n",
    "    {\n",
    "        \"code\": \"DE.SN\",\n",
    "        \"value\": 223\n",
    "    },\n",
    "    {\n",
    "        \"code\": \"DE.ST\",\n",
    "        \"value\": 605\n",
    "    },\n",
    "    {\n",
    "        \"code\": \"DE.\",\n",
    "        \"value\": 361\n",
    "    },\n",
    "    {\n",
    "        \"code\": \"DE.NW\",\n",
    "        \"value\": 237\n",
    "    },\n",
    "    {\n",
    "        \"code\": \"DE.BW\",\n",
    "        \"value\": 157\n",
    "    },\n",
    "    {\n",
    "        \"code\": \"DE.HE\",\n",
    "        \"value\": 134\n",
    "    },\n",
    "    {\n",
    "        \"code\": \"DE.NI\",\n",
    "        \"value\": 136\n",
    "    },\n",
    "    {\n",
    "        \"code\": \"DE.TH\",\n",
    "        \"value\": 704\n",
    "    }\n",
    "]\n",
    "H.set_dict_options(options) # set options\n",
    "H.add_data_set(data, 'map', 'Random data', joinBy=['code_hasc', 'code'], # set dataset\n",
    "                states={\n",
    "                    'hover': {\n",
    "                        'color': '#BADA55'\n",
    "                    }\n",
    "                },\n",
    "                dataLabels={\n",
    "                    'enabled': True,\n",
    "                    'format': '{point.properties.postal}'\n",
    "                })\n",
    "\n",
    "H.set_map_source('http://www.highcharts.com/samples/data/jsonp.php?filename=germany.geo.json&callback=?', True) # set map data from the src (jsonp)\n",
    "\n",
    "H"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}
